<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#">添加记录</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <button type="button" class="btn btn-dark" @click="commit()">保存</button>
        </li>
        <li class="nav-item">
          <button type="button" class="btn btn-dark" @click="$router.back(-1)">取消</button>
        </li>
      </ul>
    </nav>
    <div class="container-root row">
      <div class="col-1 col-sm-3"></div>
      <table class="col-10 col-sm-6">
        <tbody>
          <tr class="container-line">
            <td>姓名:</td>
            <td>
              <input type="text" class="form-control" v-model="content.name" />
            </td>
          </tr>
          <tr>
            <td>日期:</td>
            <td>
              <input type="date" class="form-control" v-model="content.date" />
            </td>
          </tr>
          <tr>
            <td>类型:</td>
            <td>
              <select class="form-control" v-model="content.type">
                <option value="1">模拟机复训</option>
                <option value="2">理论复训</option>
                <option value="3">现场复训</option>
                <option value="4">模拟机考核</option>
                <option value="5">理论考核</option>
                <option value="6">现场考核</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>内容:</td>
            <td>
              <input type="text" class="form-control" v-model="content.title" />
            </td>
          </tr>
          <tr>
            <td>时长:</td>
            <td>
              <input type="number" min="1" max="8" class="form-control" v-model="content.duration" />
            </td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="alert alert-info alert-dismissible" v-show="message.length>0">
      <button type="button" class="close" @click="message=''">&times;</button>
      <strong>出错了!</strong>
      {{message}}
    </div>
  </div>
</template>

<script>
export default {
  name: "EditorView",
  data() {
    return {
      content: {
        name: "幺鸡",
        date: "2019-01-01",
        type: "1",
        title: "相关进近",
        duration: "1",
        examiner: "",
        timestamp: ""
      },
      message: ""
    };
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    }
  },
  methods: {
    show() {
      window.console.clear();
      window.console.log(JSON.stringify(this.content));
      this.message = "message...";
    },
    commit() {
      if (this.verify) {
        this.axios
          .post("backend.php", { action: "add", payload: this.content })
          .then(response => {
            if (this.devMode) window.console.log(response.data);
            this.$store.dispatch("loadData");
          })
          .catch();
      }
    },
    verify() {
      return (
        this.verify_name() &&
        this.verify_date() &&
        this.verify_title() &&
        this.verify_duration()
      );
    },
    verify_name(val) {
      val;
      return true;
    },
    verify_date(val) {
      val;
      return true;
    },
    verify_title(val) {
      val;
      return true;
    },
    verify_duration(val) {
      val;
      return true;
    }
  },
  mounted() {
    let d = new Date();
    let day = d.getDate().toString();
    let year = d.getFullYear().toString();
    let month = (d.getMonth() + 1).toString();
    if (day.length == 1) {
      day = "0" + day;
    }
    if (month.length == 1) {
      month = "0" + month;
    }
    this.content.date = year + "-" + month + "-" + day;
    this.content.examiner = this.$store.state.operator;
  }
};
</script>

<style scoped>
.container-root {
  padding-top: 3em;
  text-align: center;
}
td {
  padding: 0.75em 0;
}
</style>